<template>
  <div>
    
    <!-- 提供一个div包含一个输入，模糊查询 -->
  <div style="margin: 20px 0px">
   
   <!-- input -->
   <el-input
    placeholder="请输入内容"
    v-model="keyword"
    clearable
    style="width: 20%"
   >
   </el-input>
   
   <!-- 按钮 -->
   <el-button type="primary" @click="queryPage">搜索</el-button>
   <!-- 新增按钮 -->
   <el-button type="success" @click="dialogVisible = true">新增</el-button>
  </div>
    <el-table :data="tableData" border style="width: 100%">

      <el-table-column prop="id" label="编码" width="180"> </el-table-column>
      <el-table-column prop="name" label="分类名" width="180"> </el-table-column>
      <el-table-column prop="remark" label="描述"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 定义一个分页标签 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
      :page-sizes="[1, 10, 20, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 定义一个分页标签 -->

    

    <!-- 定义一个对话框 -->
    <el-dialog title="新增疫苗类型" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="分类名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">提 交</el-button>
      </span>
    </el-dialog>


      <!-- 定义一个对话框 -->
      <el-dialog title="编辑疫苗类型" :visible.sync="dialogVisible_edit" width="30%" :before-close="handleClose">
      <el-form ref="form_edit" :model="form_edit" label-width="80px">
        <el-form-item label="编号">
          <el-input v-model="form_edit.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名">
          <el-input v-model="form_edit.name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form_edit.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_edit = false">取 消</el-button>
        <el-button type="primary" @click="update">提 交</el-button>
      </span>

    </el-dialog>
  </div>
</template>
  
   
  
<script>

//导入request工具
import request from "@/utils/request";

export default {
  data() {
    return {
      tableData: [],
      form: {
        id: "",
        name: "",
        remark: "",
      },
      form_edit: {
        id: "",
        name: "",
        remark: "",
      },
      dialogVisible: false,
      dialogVisible_edit: false,
      total: 0,
      pageNum: 1, //当前页码
      pageSize: 10, //当前页码
      keyword: '',
      value: "",  
    };
  },
  //created页面加载完触发的生命周期
  created() {
    this.queryPage();
    this.queryAll();
  },
  methods: {
    queryName(){
      request.get("")
    },
    // 查询所有的疫苗的分类信息
    queryAll() {
      request
        .get("/vaccinum-type/queryAll", {
          params: {},
        })
        .then((res) => {
          console.log(res);
          this.options = res.list;
        });

    },
    // 保存一条疫苗的分类信息
    save() {
      //发起一个异步请求，查询分类的数据
      request
        // post 请求方式    提交的数据
        .post("/vaccinum-type/insert", this.form)
        // then表示请求后的回调函数
        .then((res) => {
          //判断操作是否成功
          if (res.ok == true) {
            //重新查询数据
            this.queryPage();
            //消息提示
            this.$message({
              message: "新增成功",
              type: "success",
            });
            //关闭对话框
            this.dialogVisible = false;
          } else {
            this.$message.error("新增失败");
          }
        });
    },
    // 查询疫苗的分类分页数据
    queryPage() {
      //发起一个异步请求，查询分类的数据
      request.get("/vaccinum-type/list", {
        params: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res);
        // 把后台的响应的数据赋值给data中的tableData
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    // 更新疫苗的分类信息
    update() {
      //发起一个异步请求，查询分类的数据
      request
        // post 请求方式    提交的数据
        .post("/vaccinum-type/update", this.form_edit)
        // then表示请求后的回调函数
        .then((res) => {
          //判断操作是否成功
          if (res.ok == true) {
            //重新查询数据
            this.queryPage();
            //消息提示
            this.$message({
              message: "更新成功",
              type: "success",
            });
            //关闭对话框
            this.dialogVisible_edit = false;
          } else {
            this.$message.error("更新失败");
          }
        });
        
    },
        // 对话框关闭前的弹窗
        handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    // 更改每页的记录数
    handleSizeChange(val) {
      // 更新数据
      this.pageSize = val;
      // 查询
      this.queryPage();
      console.log(`Size每页 ${val} 条`);
    },
    // 更改页码（当前页）
    handleCurrentChange(val) {
      // 更新数据
      this.pageNum = val;
      // 查询
      this.queryPage();
      console.log(`Current当前页: ${val}`);
    },
    handleEdit(index, row) {
      console.log(index, row);
     // request.get("/vaccinum-type/queryOne", {
     //   params: {
      //    id: row.id
     //   },
     // }).then((res) => {
     //   console.log(res);
      //  this.form_edit = res;
     // });
      this.form_edit.id = row.id
      this.form_edit.name = row.name
      this.form_edit.remark = row.remark
      this.dialogVisible_edit = true
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          console.log(row.name);
          // 调用删除接口
          request.get("/vaccinum-type/delete",{
            params: {
            id: row.id
            }
            }).then((res)=>{
              // 判断是否删除成功
            if(res.ok == true){
              this.queryPage();
              this.$message({
              type: 'success',
              message: '删除成功!'
            });
            }else{
              this.$message({
              type: 'info',
              message: '删除失败'
            });  
            }
            })
        }).catch((res) => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });       
        });
      console.log(row.id);
    },
    deleteOne(row){
      
    }
  },
  
};
</script>